<template>
  <div class="from-el-conter">
    <video src="../../assets/潮点网_110257_720p.mp4" loop="loop" muted="muted" autoplay class="videoItem"></video>
    <div>
      <IndexLogin v-if="isopenSmsLogin"></IndexLogin>
      <SmsLogin v-else></SmsLogin>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue"
import emitter from "../../utils/bus";
import IndexLogin from '../../components/login/indexLogin.vue';
import SmsLogin from '../../components/login/smsLogin.vue';


let isopenSmsLogin = ref(true)

emitter.on("isopen",(data)=>{
  console.log(data);
  isopenSmsLogin.value = data
})

 
</script>

<style lang="less" scoped>
.el-form-item__content {
  .el-input {
    width: 200px;
  }
}

.el-form {
  background-color: rgba(0, 0, 0, .3);
  width: 400px;
  height: 400px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  bottom: 10%;
  right: 7%;

  .el-form-item__label {
    color: rgb(223, 210, 210);
  }

}

.from-el-conter {
  position: relative;
  height: 100vh;

}

.videoItem {
  position: fixed;
  width: 100vw;
  z-index: -39857934;
  // height: 100vh;
}

.Verification-_input {
  :deep(.el-input__wrapper) {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;

  }

  :deep(.el-input__wrapper) {
    box-shadow: none;
  }

  .el-input {
    width: 100px;

  }
}

.el-form-item__content {
  display: flex;
  flex: 1;


  .Verification-_input_span {
    background-color: rgb(248, 245, 245);
    width: 100px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-right: none;
  }
}

.el-form_span {
  text-align: center;
  margin: 0 0 60px 0;
  font-size: 32px;
  color: #fff;
}

.el-form-item {
  :deep(.el-form-item__label) {
    color: rgb(235, 232, 232);
  }
}

.form_span {
  color: rgb(234, 218, 218);
  text-align: center;
  cursor: pointer;

  &:hover {
    color: red;
  }
}
</style>
  